<script setup>
import { ref, defineOptions } from 'vue'
import { getGroup } from '@/api/getAxios.ts'
// import { activeNum } from '@/store/storeName.ts'
// import { useRouter } from 'vue-router'

// 悬疑
const first = ref({})
const suspense = ref({})
getGroup('8218').then((res) => {
    // console.log(res);
    suspense.value = res.data.data.list
    first.value = res.data.data.list[0]
})

// 都市
const city = ref({})
getGroup('8220').then((res) => {
    // console.log(res);
    city.value = res.data.data.list
})

// 玄幻
const fantasy = ref({})
getGroup('8221').then((res) => {
    // console.log(res);
    fantasy.value = res.data.data.list
})

// const router = useRouter()
// const clickHanlder = (num) => {
//     router.push(`/home?num=${num}`)
// }

// 读取pinia
// import { storeToRefs } from 'pinia'
// const store = activeNum()   
// // const { SingleNum } = storeToRefs(store)
// const clickHanlder = (num) => {
//     store.SingleNum = num
//     // window.scrollTo(0, 0);
// }


</script>
<template>
    <div class="suspense">
        <h1 class="recommend">
            <span>悬疑</span>
            <!-- <span class="iconfont icon-tiaozhuan jump"></span> -->
        </h1>
        <ul>
            <li v-for="item in suspense" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.story.smallCover" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{ item.story.name }}</p>
                    <p class="detail">{{ item.story.introduce }}</p>
                    <p class="type">
                        <span class="author-type">{{ item.story.author }} | {{ item.story.type }}</span>
                        <span class="fireValue">{{ (item.story.fireValue / 10000).toFixed(1) + '万人气值' }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <div class="suspense">
        <h1 class="recommend">
            <span>都市</span>
            <!-- <span class="iconfont icon-tiaozhuan jump"></span> -->
        </h1>
        <ul>
            <li v-for="item in city" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.story.smallCover" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{ item.story.name }}</p>
                    <p class="detail">{{ item.story.introduce }}</p>
                    <p class="type">
                        <span class="author-type">{{ item.story.author }} | {{ item.story.type }}</span>
                        <span class="fireValue">{{ (item.story.fireValue / 10000).toFixed(1) + '万人气值' }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <div class="suspense">
        <h1 class="recommend">
            <span>玄幻</span>
            <!-- <span class="iconfont icon-tiaozh  uan jump"></span> -->
        </h1>
        <ul>
            <li v-for="item in fantasy" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.story.smallCover" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{ item.story.name }}</p>
                    <p class="detail">{{ item.story.introduce }}</p>
                    <p class="type">
                        <span class="author-type">{{ item.story.author }} | {{ item.story.type }}</span>
                        <span class="fireValue">{{ (item.story.fireValue / 10000).toFixed(1) + '万人气值' }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.suspense {
    height: 204vw;
    background-color: #fff;
    margin-bottom: 15px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;

        span.jump {
            position: absolute;
            right: 0;
            font-size: 26px;
            margin-right: 20px;
        }
    }
}

ul {
    display: flex;
    flex-direction: column;

    li {
        padding: 10px;
        height: 40vw;
        display: flex;

        .coverImg {

            border-radius: 10px;
            width: 30vw;
            height: 40vw;

            img {
                border-radius: 10px;
                box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

                width: 100%;
                height: 100%;
            }
        }

        .msg {
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 68vw;
            margin-left: 10px;

            .name {
                font-size: 18px;

            }

            .detail {
                display: -webkit-box;
                text-align: center;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #939296;
                font-size: 14px;
                text-align: left;
            }

            .type {

                color: #939296;
                font-size: 12px;

                .fireValue {
                    margin-left: 20px;
                    color: #ccae59;
                }
            }


        }

    }
}


.little {
    width: 33vw;
    height: 40vw;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>